<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 实例讲解--左右滑动轮播图 </title>
    <script src="jquery.js"></script>
    <style>
        *{
            box-sizing:border-box;
        }
        body, ul{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        img{
            display:block;
        }
        .banner{
            width:700px;
            margin:50px auto;
            overflow: hidden;
        }
        .banner section{
            width:588px;
            overflow: hidden;
            border:solid 1px #ccc;
            height:120px;
            float:left;
        }
        .banner span{
            float:left;
            width:50px;
            height:120px;
            border:solid 1px #ccc;
            font-size:20px;
            text-align: center;
            padding-top:15px;
            cursor:default;
        }
        .list{
            width:2000px;
            position:relative;
            overflow: hidden;
        }
        .list li{
            float:left;
            width:200px;
        }
        .list li img{
            width:100%;
            padding-right:12px;
            height:120px;
        }
        .banner .bg{
            background:#aaa;
            color:#fff;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="banner">
        <span class="prev bg"> 下 <br/>一 <br/>张 </span>
        <section>
            <ul class="list">
                <li><img src="img/01.jpg" alt=""/> </li>
                <li><img src="img/02.jpg" alt=""/> </li>
                <li><img src="img/03.jpg" alt=""/> </li>
                <li><img src="img/04.jpg" alt=""/> </li>
                <li><img src="img/05.jpg" alt=""/> </li>
                <li><img src="img/03.jpg" alt=""/> </li>
            </ul>
        </section>
        <span class="next"> 上 <br/>一 <br/>张 </span>
    </div>
</body>
<script>
//    上一张，left:0 ---> left:-liWidth

    // 获取li宽度
    var li_width = $('.list').children().width()
    // 获取li个数
    var len = $('.list').children().length
    // 设置ul标签的实际宽度
    $('.list').css('width', len * li_width)
    // 设置初始点击次数
    var count = 0
    // 设置显示图片的个数
// 点击次数与图片隐藏个数有关
    var num  = 3
    $('.prev').click(function(){
        if( count >= (len - num) ){
            $(this).removeClass('bg')
            return
        }
        count++
        $('.next').addClass('bg')
        $('.list').animate({
            left:-li_width * count
        }, 500)
        if( count >= (len - num) ){
            $(this).removeClass('bg')
        }
    })
// -200, -400, -600;
    //
    $('.next').click(function(){
        if( count <= 0 ){
            return
        }
        count--
        $('.prev').addClass('bg')
        $('.list').animate({
            left:-li_width * count
        }, 500)
        if( count <= 0 ){
            $(this).removeClass('bg')
        }
    })
</script>
</html>